@import './utilities.scss';

@each $type in ('primary', 'secondary', 'success', 'error') {
  .text-#{$type},
  .color-#{$type} {
    color: var(--color-#{$type}) !important;
  }
}

.color-text {
  color: $--color-text;
}

.text-secondary {
  color: $--color-text-secondary !important;
}

.text-tertiary {
  color: $--color-text-tertiary !important;
}

.text-quaternary {
  color: $--color-text-quaternary !important;
}

.text-truncate {
  @include text-truncate();
}

$sizes: (
  'xxxs': $--size-xxxs,
  'xxs': $--size-xxs,
  'xs': $--size-xs,
  'sm': $--size-sm,
  'lg': $--size-lg,
);

$directions: (
  'x': 'inline',
  'y': 'block',
  't': 'top',
  'r': 'right',
  'b': 'bottom',
  'l': 'left',
);

@each $type, $size in $sizes {
  .p-#{$type} {
    padding: $size;
  }

  .m-#{$type} {
    margin: $size;
  }

  @each $alias, $direction in $directions {
    .p-#{$alias}-#{$type} {
      padding-#{$direction}: $size;
    }

    .m-#{$alias}-#{$type} {
      margin-#{$direction}: $size;
    }
  }
}

.text-center {
  text-align: center;
}

.text-bold {
  font-weight: bold !important;
}

.bg {
  background-color: $--color-bg;
}

// ============ Layout ============
.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none !important;
}

// ============ Flexbox & Grid ============
.items-center {
  align-items: center;
}

.flex-1 {
  flex: 1 1 0% !important;
}

@for $i from 1 through 5 {
  .grid-cols-#{$i} {
    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
  }
}

@each $type, $size in $sizes {
  .gap-x-#{$type} {
    column-gap: $size;
  }

  .gap-y-#{$type} {
    row-gap: $size;
  }
}

// ============ Sizing ============
.w-0 {
  width: 0px !important;
}

.w-full {
  width: 100% !important;
}
